<template>
  <div class="container">
    <div class="nav">
      <div class="location" @click="goCity()">{{ $store.city }}
        <i class="iconfont ic_site"></i>
      </div>
      <div class="search">
        <i class="iconfont search1"></i>
        <input type="text" placeholder="请输入你所在的城市" v-model.trim="city" @keydown.enter="handleEnter(city)">
      </div>
    </div>
    <div class="weather">
      <table>
        <tr>
          <td>城市</td>
          <td>{{ currentWeather.city }}</td>
        </tr>
        <tr>
          <td>天气</td>
          <td>{{ currentWeather.weather }}</td>
        </tr>
        <tr>
          <td>温度</td>
          <td>{{ currentWeather.temperature }}</td>
        </tr>
        <tr>
          <td>风向</td>
          <td>{{ currentWeather.winddirection }}</td>
        </tr>
        <tr>
          <td>风力</td>
          <td>{{ currentWeather.windpower }} </td>
        </tr>
      </table>
    </div>
    <open-map></open-map>
  </div>
</template>

<script setup>
import OpenMap from "./components/OpenMap.vue";
import { useRouter } from "vue-router";
const $router = useRouter();

/*  1、获取当前城市 */
import { useCityStore } from "@/stores/city.js"
import { ref, onMounted, getCurrentInstance, watch } from "vue";
import { useGeoLoactionHook } from "./hooks/useGeoLocationHook";
import { getLocationByCityHttp } from "@/request/index.js";

const $store = useCityStore();
let $map = null;
/* 2、点击按钮 跳转到city页面 */
const goCity = () => {
  $router.push('/city')
}
/* 从pinia中获取数据 */
const currentWeather = ref([]);
onMounted(async () => {
  const { proxy } = getCurrentInstance();
  $map = proxy.$map;
  let { weather } = await useGeoLoactionHook({
    map: $map
  })

  watch(weather, (val) => {
    // console.log(val, 'newValue')
    currentWeather.value = val;
  })
})


/* ------------处理搜索框--------------- */
const city = ref("");
//1、获取input的值
const handleEnter = async (city) => {
  console.log(city);
  $store.changeCity(city);
  /* 开启漫游 */
  let { weather } = await useGeoLoactionHook({
    map: $map,
  })

  watch(weather, (val) => {
    console.log(val, 'newValue')
    currentWeather.value = val;
  })
};

</script>

<style scoped>
.container {
  display: flex;
}

.nav {
  position: fixed;
  width: 100%;
  height: 58px;
  top: 0;
  display: flex;
  align-items: center;
  background-color: #4264fb;
  color: #fff;
  z-index: 10;
}

.location {
  display: flex;
  width: 88px;
  height: 100%;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  font-size: 14px;
  color: #ffd04b;
  cursor: pointer;
}

.nav .ic_site {
  color: #ff2d51 !important;
  font-weight: 600;
  font-size: 13px;
}

.search {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 300px;
  height: 40px;
  margin: 20px;
  padding: 1px 11px;
  background-color: #fff;
  border-radius: 4px;
  z-index: 10;
}

.search input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background-color: #fff;
  font-size: 14px;
  color: #a8abb2;
  padding-left: 18px;
}

.search1 {
  width: 30px;
  height: 30px;
  color: #a8abb2;
  font-size: 18px;
  line-height: 30px;
  cursor: pointer;
}

.weather {
  position: fixed;
  right: 20px;
  top: 70px;
  background: linear-gradient(to top, #6dd5edb0, #2193b0);
  z-index: 100;
  border-radius: 15px;
  box-shadow: 0 0 3px 2px #333;
  overflow: hidden;
}

.weather table {
  color: #fff;
  text-align: center;
  width: 200px;
  line-height: 30px;
  border-radius: 15px;
  font-size: 15px;
  border-collapse: collapse;
}

.weather table td {
  border: 1px solid #eeeeee79;
  ;
}
</style>